<template>
  <div class="wrap">
    <img class="pic" :src="goodsdata.img_big_logo"> 
    <div class="moneybox_wrap">
      <div class="moneybox">
        <span class="current_price">￥{{goodsdata.current_price}}</span>
        <span class="price" v-if="goodsdata.is_sale">￥{{goodsdata.price}}</span>
      </div>
      <div class="money_r">
        <p>大聚惠</p>
        <div class="cuxiao">
          <span v-if="goodsdata.is_sale">特价</span>
          <span class="hot" v-if="goodsdata.is_hot">热销</span>
          <span class="no" v-if="!goodsdata.is_sale && !goodsdata.is_hot">暂无优惠</span>
        </div>
      </div> 
    </div> 
    <p class="title">{{goodsdata.title}}</p>
    <div class="detail_footer">
      <div class="iconitem">
        <span class="iconfont">&#xe605;</span>
        <span class="txt">客服</span>
      </div>
       <div  class="iconitem">
        <span class="iconfont">&#xe7d6;</span>
        <span class="txt">店铺</span>
      </div>
       <div  class="iconitem" @click="cartlink">
        <span class="iconfont">&#xe60f;</span>
        <span class="txt">购物车</span>
      </div>
      <div class="btn">马上抢</div>
      <div class="btn cart" @click="addcart">加入购物车</div>
    </div>
    <span class="iconfont return" @click="returnview">&#xe601;</span>
  </div>
</template>
<script>
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
import {ref} from 'vue'
// 获取商品详情
const GetGoods=()=>{
   const goodsdata = ref([])
   const getgoods = async (id)=>{
      const res=  await axios({
        url:"http://localhost:8888/goods/item/"+id,
        method:"get"
      })
      goodsdata.value = res.data.info
   }
   return {getgoods,goodsdata}
}
// 返回上一页
const Returnview = ()=>{
  const router = useRouter() 
    const returnview = ()=>{
      router.back()
    }
   return {returnview}
}
// 加入购物车
const Addcart = (goodsid)=>{
  const router = useRouter()
  const addcart = async()=>{
      const {userid,token}=localStorage
      if (!userid) {
        alert("加入购物车失败")
        return
      }
      const res = await axios({
          url:"http://localhost:8888/cart/add",
          method:"post",
          data:"goodsId="+goodsid+"&id="+userid,
          headers:{"authorization":token}
      })
       // 登录过期
      if (res.data.code===401) {
          localStorage.clear()
          router.push('login')
          return
      }
      if (res.data.code===1) {
        alert(res.data.message)
      }
  }
  return {addcart}
}
// 跳转到购物车
const Cartlink=()=>{
   const router =useRouter()
   const cartlink=()=>{
      router.push("cart")
   }
   return {cartlink}
}
export default {
  name:"DetailView",
  setup() {
    const route = useRoute()
    // 获取商品详情
    const {getgoods,goodsdata} = GetGoods()
    const goodsid = route.query.goodsid
    getgoods(goodsid)
    // 返回上一页
    const {returnview} = Returnview()
    // 加入购物车
    const {addcart} = Addcart(goodsid)
    // 跳转购物车
    const {cartlink} = Cartlink()
    return {getgoods, goodsdata, returnview, addcart, cartlink}
  }
}
</script>
<style scoped lang="scss">
.wrap {
  position: relative;
  .pic{
    width: 100%;
    display: block;
  }
  .moneybox_wrap{
    display: flex;
    height: .74rem;
    .moneybox {
      width: 2.4rem;
      background-color: #ff3732;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: .24rem;
        color: white;
        margin-left: .15rem;
      }
      .price {
        font-size: .15rem;
        text-decoration: line-through;
      }
    }
    .money_r {
      flex: 1;
      height: 100%;
      background-color: #feed43;
      padding-top: .03rem;
      box-sizing: border-box;
      p {
        font-size: .225rem;
        color: #ff3732;
        text-align: center;
      }
      .cuxiao {
        display: flex;
        justify-content: center;
        margin-top: .1rem;
        span {
          font-size: .15rem;
          color: white;
          background-color: skyblue;
          width: .4rem;
          text-align: center;
        }
        .hot {
          margin-left: .1rem;
          background-color: red;
        }
        .no {
          width: .7rem;
          background-color: pink;
        }
      }
    }
  }
  .title {
    font-size: 0.15rem;
    line-height: 0.175rem;
    font-weight: bold;
    color: #333;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0rem 0.075rem;
    box-sizing: border-box;
    margin: 0.06rem 0rem 0.06rem;
  }
  .detail_footer{
    width: 100%;
    border-top: .005rem solid #ccc;
    height: .7rem;
    display: flex;
    position: fixed;
    justify-content: space-evenly;
    align-items: center;
    bottom: 0;
    .iconitem{
      display: flex;
      flex-direction: column;
      text-align: center;
      color: rgb(87, 87, 87);
      .iconfont{
        font-size: .22rem;
      }
    }
    .btn{
      width: 1rem;
      height: .35rem;
      background-color: #ffcc00;
      text-align: center;
      line-height:.35rem;
      color: white;
      font-weight: bold;
    }
    .cart{
      background-color: #ff6602;
    }
  }
  .return {
    position: fixed;
    top: 2%;
    left: 2%;
    width: .4rem;
    height: .4rem;
    font-size: .18rem;
    line-height: .4rem;
    text-align: center;
    padding-left: .05rem;
    border-radius: 50%;
    box-sizing: border-box;
    color: white;
    background-color: rgba(#000000, .2);
  }
}
</style>